import {View} from '@tarojs/components'
import styles from './index.module.scss';
import {useState} from "react";
import Shop from '../../components/Shop/Shop';
import Me from "../../components/Me/Me";


const Index = () => {
  const [mainTabbar, setMainTabbar] = useState(0); //0.商品列表，1个人中心;


  const selectShop = () => {
    setMainTabbar(0);
  }

  const selectMe = () => {
    setMainTabbar(1);
  }

  return (
    <View>
      {mainTabbar === 0 && <Shop/>}
      {mainTabbar === 1 && <Me/>}
      <View className={styles.bottom_select}>

        <View className={`${styles.bottom_btn} ${mainTabbar === 0 ? 'color-primary-text' : 'color-un-select-text'}`}
              onClick={selectShop}>
          <View style={{fontSize: "40rpx"}} className={"iconfont icon-dingdan"}/>
          <View className={styles.bottom_btn_text}>购物</View>
        </View>

        <View onClick={selectMe}
              className={`${styles.bottom_btn} ${mainTabbar === 1 ? 'color-primary-text' : 'color-un-select-text'}`}>
          <View style={{fontSize: "40rpx"}} className="iconfont icon-me-full"/>
          <View className={styles.bottom_btn_text}>我的</View>
        </View>

      </View>
    </View>
  )
}
export default Index;
